<template>
  <div ref="areaStackSmoothLineChartRef" :style="{width: width,height: height}"></div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, shallowRef, watch, nextTick} from 'vue';
import {ECharts, init} from "echarts";
import {useThemeConfig} from "/@/stores/themeConfig";
import {storeToRefs} from "pinia";

// 光滑曲线堆栈图，单线
export default defineComponent({
  name: 'AreaStackSmoothLineChart',
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          title: 'none title',
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          color: ["#d8acff"]
        }
      },
    },
    width: {
      type: String,
      default: () => '1000px',
    },
    height: {
      type: String,
      default: () => '600px',
    }
  },
  setup(props, {emit}) {
    const areaStackSmoothLineChartRef = ref<HTMLElement>();
    const echartInstance = shallowRef<ECharts>();
    const storesThemeConfig = useThemeConfig();
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const state = reactive({
      theme: '',
      bgColor: 'transparent',
      titleColor: '#303133',
    });
    watch(() => themeConfig.value.isCollapse,
        (newVal) => {
          nextTick(() => {
            setTimeout(() => {
              initLineChart();
            }, 500);
          });
        },
        {
          deep: true,
          immediate: true,
        })
    onMounted(() => {
      setTimeout(() => {
        initLineChart();
      }, 500);
    });
    const initLineChart = () => {
      if (echartInstance.value) echartInstance.value.dispose();
      echartInstance.value = init(areaStackSmoothLineChartRef.value, state.theme);
      const _data = props.data
      const option = {
        color: _data.color,
        title: {
          text: _data.title
        },
        tooltip: {trigger: 'axis'},
        grid: {
          left: 0,   // 根据条件设置左边距
          right: 0, // 根据条件设置右边距
          top: 50,     // 根据条件设置上边距
          bottom: 0, // 根据条件设置下边距
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _data.xAxis,

        },
        yAxis: {
          type: 'value',
          axisTick: {
            inside: true, // 刻度线朝内
            length: 6     // 可选：设置刻度线长度
          },
        },
        series: [
          {
            data: _data.data,
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          }
        ]
      };
      echartInstance.value.setOption(option);
      window.addEventListener('resize', () => {
        echartInstance.value && echartInstance.value.resize()
      });
    };
    return {
      themeConfig,
      echartInstance,
      areaStackSmoothLineChartRef,
      ...toRefs(state),
    };
  },
});
</script>
